<template>
	<view class="order-list-page">
		<view class="share-top">
			<view class="">
				<image class="share-img" :src="member.headimg" mode=""></image>
			</view>
			<view class="">
				<view class="">
					{{member.title}}
				</view>
				<view class="">
					{{member.tips}}
				</view>
			</view>
		</view>
		<!-- 订单列表 -->
		<view class="my-order">
			我的订单
		</view>
		<scroll-view class="order-list" scroll-y>
			
			<view v-for="(order, index) in prolist" :key="order.id" class="order-item"
				 @click.stop="toggleSelect(order)">
				<view class="order-info">
					<view class="order-header">
						<!-- <text class="order-no">订单号：{{order.ordernum}}</text> -->
						<!-- <text class="order-status">{{getStatusText(order.status)}}</text> -->
					</view>

					<view class="goods-info">
						<image :src="order.pic" class="goods-image" mode="aspectFill" />
						<view class="goods-detail">
							<view class="goods-name">{{order.name}}</view>
							<!-- <view class="goods-spec">{{order.ggname}}</view> -->
							<view class="goods-bottom">
								<view class="goods-price">¥{{order.sell_price}}</view>
								<image class="goods-add" src="https://pic.hedashepin.com/upload/3/20250602/82da36c2ff2ecc57da142a7a29b20cfd.png" mode=""></image>
								
							</view>

						</view>
					</view>

					<!-- <view class="order-footer">
            <text class="order-time">{{formatTime(order.createtime)}}</text>
            <text class="order-amount">实付：¥{{order.real_totalprice}}</text>
          </view> -->
				</view>
			</view>
		</scroll-view>

		<view class="footer-box">
			<view class="footer-btn" @click="goHome" :style="{background:t('color1')}">
				去首页逛逛
			</view>
		</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				prolist: [],
				selectedOrders: [], // 选中的订单ID数组
				opt: {},
				shareData: {},
				member: {}
			}
		},

		onLoad(opt) {
			this.opt = app.getopts(opt);
			this.getdata();

		},


		methods: {
			getdata: function() {
				var that = this;
				that.loading = true;
				app.get(
					"order/getShareOrderDetail", {
						id: that.opt.id,
					},
					function(res) {
						that.loading = false;
						that.prolist = res.data.prolist || [];
						that.member = res.data.member;


					}
				);
			},

			// 格式化时间戳
			formatTime(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp * 1000);
				return `${date.getFullYear()}-${this.padZero(date.getMonth()+1)}-${this.padZero(date.getDate())} ${this.padZero(date.getHours())}:${this.padZero(date.getMinutes())}`;
			},

			padZero(num) {
				return num < 10 ? '0' + num : num;
			},
			toggleSelect(item){
				
				uni.navigateTo({
					url:'/pages/shop/product?id=' + item.proid
				})
			},
			goHome(){
				uni.navigateTo({
					url:'/pages/index/index'
				})
			}


		}
	}
</script>

<style>
	.order-list-page {
		position: relative;
		padding-bottom: 100px;
		/* 为底部按钮留出空间，防止内容被遮挡 */
		height: 100vh;
		box-sizing: border-box;
	}

	.share-top {
		background: linear-gradient(to right,
				#4C56A4,
				#AB7DB5);
		display: flex;
		align-items: center;
		padding: 20rpx;
		color: #fff;
		gap: 10rpx;
		position: relative;
	}
	.share-top::after {
	    content: "";
	    position: absolute;
	    bottom: -15rpx; /* 向下偏移 */
	    left: 80rpx;
	    transform: translateX(-50%);
	    width: 0;
	    height: 0;
	    border-left: 15rpx solid transparent;
	    border-right: 15rpx solid transparent;
	    border-top: 15rpx solid #6860A8; /* 渐变右侧颜色 */
	}
	.share-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}
	.my-order{
		font-weight: bold;
		padding:20rpx 20rpx 0 20rpx;
		font-size: 36rpx;
	}
	.order-list {
		flex: 1;
		padding: 20rpx;
		box-sizing: border-box;
		height: calc(100vh - 300rpx);
		/* 减去顶部和底部的高度 */
	}

	.order-item {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	/* .order-item.selected {
    background-color: #f0f7ff;
  } */

	.order-checkbox {
		margin-right: 20rpx;
	}

	.order-info {
		flex: 1;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-no {
		font-size: 26rpx;
		color: #666;
	}

	.order-status {
		font-size: 26rpx;
		color: #e74c3c;
	}

	.goods-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.goods-add{
		width: 50rpx;
		height: 50rpx;
	}
	.add-circle {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #fff;
		line-height: 1;
		box-sizing: border-box;
	}

	.goods-info {
		display: flex;
		margin-bottom: 20rpx;
	}

	.goods-image {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.goods-detail {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.goods-name {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.goods-spec {
		font-size: 24rpx;
		color: #999;
	}

	.goods-price {
		font-size: 28rpx;
		color: #e74c3c;
	}

	.order-footer {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
	}

	.order-time {
		color: #999;
	}

	.order-amount {
		color: #333;
		font-weight: bold;
	}

	.bottom-action-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;
		border-top: 1rpx solid #eee;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.select-all {
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.select-all checkbox {
		margin-right: 10rpx;
	}

	.action-buttons {
		display: flex;
	}

	.share-btn {
		margin-left: 20rpx;
		padding: 0 30rpx;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		color: #fff;
		border-radius: 35rpx;
		border: none;
	}

	.share-circle {
		background-color: #f39c12;
	}

	.share-friend {
		background-color: #2ecc71;
	}

	.footer-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 150rpx;
		/* 调整为你需要的高度 */
		background-color: #fff;
		/* 背景色根据需要调整 */
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		/* 可选的上阴影 */
		z-index: 100;
	}

	.footer-btn {
		width: 80%;
		height: 90rpx;
		background-color: #8c178c;
		/* 按钮颜色根据需要调整 */
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 80rpx;
		font-size: 32rpx;
		letter-spacing: 4rpx;
	}
</style>